<template>
  <div class="page-content">
    <div class="header" style="margin-bottom: 1.5rem">
      <h3>题库列表</h3>
    </div>
    <!-- 表格菜单 -->
    <el-radio-group v-model="tableLayout">
      <el-radio-button value="0" @click="getquestionbankllist_tab('0')">全部题库</el-radio-button>
      <el-radio-button value="1" @click="getquestionbankllist_tab('1')">科目一</el-radio-button>
      <el-radio-button value="2">科目二</el-radio-button>
      <el-radio-button value="3">科目三</el-radio-button>
      <el-radio-button value="4" @click="getquestionbankllist_tab('4')">科目四</el-radio-button>
      <el-radio-button value="5">学法减分</el-radio-button>
      <el-radio-button value="6">三力测试</el-radio-button>
      <el-radio-button value="7">注销</el-radio-button>
      <el-radio-button value="8">满分学习</el-radio-button>
    </el-radio-group>
    <!-- 表格菜单 -->
    <el-row style="margin-top: 1.5rem; width: 100%">
      <!-- <el-col :xs="24" :sm="12" :lg="6">
        <el-input placeholder="部门名称"></el-input>
      </el-col> -->
      <div style="width: 12px"></div>
      <!-- 顶部搜索栏 -->
      <div style="width: 100%">
        <table-bar :showTop="true" @search="search" @reset="resetForm(searchFormRef)" @changeColumn="changeColumn"
          :columns="columns">
          <template #top>
            <el-form :model="searchForm" ref="searchFormRef" label-width="82px" style="padding-bottom: 1.5rem">
              <el-row :gutter="20">
                <form-input label="关键字" prop="name" v-model="searchForm.questionName" />
                <form-select label="车型选择" prop="phone" v-model="searchForm.carIds" :options="cardlist" />
                <form-select label="题目类型" prop="type_two" v-model="searchForm.cont_type" :options="typeOptions" />
              </el-row>
              <el-row :gutter="20">
                <!-- 创建日期筛选 -->
                <div class="databox">
                  <label class="el-form-item__label" style="margin-left: 1.5rem">操作时间：</label>
                  <el-date-picker label="操作时间：" v-model="searchForm.startCreatTime" type="datetimerange"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY/MM/DD ddd" value-format="YYYY-MM-DD HH:mm:ss" time-format="A hh:mm:ss" />
                </div>
                <!-- end创建日期筛选 -->
              </el-row>
            </el-form>
          </template>
        </table-bar>
      </div>
      <!-- end顶部搜索栏 -->
      <div style="width: 100%"> </div>
      <el-col :xs="24" :sm="12" :lg="20">
        <el-button v-ripple>刷新</el-button>
        <el-button @click="showDialog('add')" v-ripple>新增题库</el-button>
      </el-col>
      <div>
        <ExcelImport @import-success="handleImportSuccess" @import-error="handleImportError">
          <template #import-text>导入题库</template>
        </ExcelImport>
        <ExcelExport style="margin-left: 10px" :data="tableData" filename="题库数据" sheetName="题库列表" type="success"
          :headers="headers" @export-success="handleExportSuccess" @export-error="handleExportError">
          下载模板
        </ExcelExport>
        <el-button type="danger" style="margin-left: 10px" @click="handleClear" v-ripple>清除数据</el-button>
      </div>
    </el-row>
    <art-table :data="tableData" v-if="tableLayout != '2' && tableLayout != '3'" selection :currentPage="pageNum"
      :pageSize="pageSize" :total="pagetotal" @current-change="currentchange" @size-change="sizechange">
      <template #default>
        <el-table-column label="ID" prop="id" width="80" />
        <!-- <el-table-column label="题目标题" prop="bankcont_title" /> -->
        <el-table-column label="题目" prop="bankcont_title" width="1400">
          <template #default="scope" style="width: 500px">
            <div class="bankcont_title">
              <div class="bankcont_title_text">{{ scope.row.questionName }}</div>
              <!-- 题目类型 -->
              <div class="button_bigbox">
                <el-button v-if="scope.row.questionType == '1'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" plain>单选题
                </el-button>
                <el-button v-if="scope.row.questionType == '0'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" type="warning" plain>多选题
                </el-button>
                <el-button v-if="scope.row.questionType == '2'" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" type="danger" plain>判断题
                </el-button>
                <el-button v-if="scope.row.categoryName.includes('科目一')" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" plain>科目一
                </el-button>
                <el-button v-if="scope.row.categoryName.includes('科目四')" class="tag-item"
                  style="float: left; margin-right: 0.5rem" round size="small" type="danger" plain>科目四
                </el-button>
              </div>
              <div style="clear: both"></div>
              <!-- end题目类型 -->
            </div>
            <!-- 车型 -->
            <div class="cartcont">
              <div class="cartcont_bigbtn">
                <el-button class="cartcont_btn" v-for="carModelList in scope.row.carModelList" :key="carModelList" round
                  size="small">
                  {{ carModelList.carName }} ({{ carModelList.carTypes }})
                </el-button>
              </div>

            </div>
            <!-- end车型 -->
            <div class="labellist">
              <div class="label" v-if="scope.row.questionA">
                <el-link :type="scope.row.answer.includes('A') ? 'primary' : 'default'" underline="never">
                  A:{{ scope.row.questionA }}
                </el-link>
              </div>
              <div class="label" v-if="scope.row.questionB">
                <el-link :type="scope.row.answer.includes('B') ? 'primary' : 'default'" underline="never">
                  B:{{ scope.row.questionB }}
                </el-link>
              </div>
              <div class="label" v-if="scope.row.questionC">
                <el-link :type="scope.row.answer.includes('C') ? 'primary' : 'default'" underline="never">
                  C:{{ scope.row.questionC }}
                </el-link>
              </div>
              <div class="label" v-if="scope.row.questionD">
                <el-link :type="scope.row.answer.includes('D') ? 'primary' : 'default'" underline="never">
                  D:{{ scope.row.questionD }}
                </el-link>
              </div>
            </div>
            <div style="clear: both"></div>
            <div class="tagcontbigsize">
              <el-tag class="tag-item" type="primary" style="float: left; margin-right: 0.5rem">解析:
              </el-tag>
              <div v-html="scope.row.questionAnalysis" class="tagcontsize"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="图片" #default="scope">
          <block v-if="scope.row.questionImg">
            <el-image class="tableimg" fit="contain" :src="scope.row.questionImg"></el-image>
          </block>
        </el-table-column>
        <el-table-column label="操作时间：" prop="updateTime">
          <template #default="scope">
            {{ formatDate(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template #default="scope">
            <el-row>
              <button-more :list="[
                { key: 'edit', label: '编辑' },
                { key: 'delete', label: '删除' }
              ]" @click="buttonMoreClick($event, scope.row)" />
            </el-row>
          </template>
        </el-table-column>
      </template>
    </art-table>

    <art-table v-if="tableLayout == '2' || tableLayout == '3'">
      <template #default>
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" width="55" />
        <!-- 视频内容 -->
        <el-table-column label="视频标题" prop="bankcont_title" width="800">
          <template #default="scope">
            <div class="title_box">
              <div class="title_box_left">
                <img class="tableimg" :src="scope.row.imgurl" />
              </div>
              <div class="title_box_right">
                <div class="bankcont_title">
                  <div class="bankcont_title_text">{{ scope.row.bankcont_title }}</div>
                </div>
                <div style="clear: both"></div>
                <!-- 视频类型 -->
                <div class="cartcont">
                  <el-button v-for="type in scope.row.type" :key="type" round size="small">
                    {{ type }}
                  </el-button>
                </div>
                <!-- 视频类型 -->
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- end视频内容 -->
        <!-- 视频链接 -->
        <el-table-column label="视频" prop="videourl" width="300">
          <template #default="scope">
            <video class="columnvideo" width="160" height="90" controls :poster="scope.row.imgurl"
              :src="scope.row.videourl"></video>
          </template>
        </el-table-column>
        <el-table-column label="视频描述" prop="desc" width="300" />
        <!-- 视频链接 -->
        <el-table-column label="排序" prop="sort" width="100" />
        <el-table-column #default="scope" label="启用状态">
          <el-switch v-model="scope.row.switchvalue" />
        </el-table-column>

        <el-table-column label="创建时间：" prop="date">
          <template #default="scope">
            {{ formatDate(scope.row.date) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-row>
              <button-more :list="[
                { key: 'edit', label: '编辑' },
                { key: 'delete', label: '删除' }
              ]" @click="buttonMoreClick($event, scope.row)" />
            </el-row>
          </template>
        </el-table-column>
      </template>
    </art-table>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增题目' : '编辑题目'" width="30%"
      v-model:visible="dialogVisible" style="height: 800px; overflow: hidden; overflow-y: auto"
      :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" label-width="120px" style="padding-right: 100px">
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" :rows="3" />
        </el-form-item>
        <el-form-item label="车型" prop="card_type">
          <el-checkbox-group v-model="cardvaluelist" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cardlist" :label="city.value" :key="city.value">{{ city.label }}({{ city.tag
            }})</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="所属分类" prop="name">
          <!-- 复选分类1 分类2 -->
          <el-cascader v-model="cascadervalue" :options="types_one"
            :props="{ multiple: true, checkStrictly: false, value: 'id', label: 'name' }" @change="cascaderclick"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="所属科目" prop="types_one">
          <el-checkbox-group v-model="questionoption" @change="handlequestionoption">
            <el-checkbox v-for="questionlist in questionlist" :label="questionlist.value" :key="questionlist.value">{{
              questionlist.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="题目名称" prop="name">
          <el-input type="textarea" :rows="4" v-model="form.questionName" />
        </el-form-item>
        <el-form-item label="图片" prop="name">
          <el-upload class="avatar-uploader" style="
              border: 1px dashed var(--el-border-color-darker);
              border-radius: 6px;
              overflow: hidden;
            " :action="server" :headers="imgheaders" :show-file-list="false" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-image v-if="storeLogo" :src="storeLogo" class="avatar" fit="contain"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                <Plus />
              </el-icon></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="题目类型" prop="cont_type">
          <!-- 单选 -->
          <el-radio v-model="radio" label="0">多选题</el-radio>
          <el-radio v-model="radio" label="1">单选题</el-radio>
          <el-radio v-model="radio" label="2">判断题</el-radio>
        </el-form-item>
        <!-- 单选题 -->
        <div class="contlist_list" v-if="radio != '2'">
          <el-form-item label="题目A："><el-input class="contliststyle" v-model="form.questionA" /></el-form-item>
          <el-form-item label="题目B："><el-input class="contliststyle" v-model="form.questionB" /></el-form-item>
          <el-form-item label="题目C："><el-input class="contliststyle" v-model="form.questionC" /></el-form-item>
          <el-form-item label="题目D："><el-input class="contliststyle" v-model="form.questionD" /></el-form-item>
        </div>
        <!-- 单选题 -->
        <!-- 判断题 -->
        <div class="contlist_list" v-if="radio == '2'">
          <el-form-item label="题目A："><el-input class="contliststyle" v-model="form.questionA" /></el-form-item>
          <el-form-item label="题目B："><el-input class="contliststyle" v-model="form.questionB" /></el-form-item>
        </div>
        <!-- end判断题 -->
        <el-form-item label="答案" prop="answer">
          <el-input v-model="form.answer" />
        </el-form-item>
        <el-form-item label="题目解析" prop="analysis">
          <el-input type="textarea" :rows="6" v-model="form.questionAnalysis" />
        </el-form-item>
        <el-form-item label="速学速记" prop="fastStudy">
          <el-input type="textarea" :rows="6" v-model="form.fastStudy" />
        </el-form-item>
        <el-form-item label="视频讲解" prop="video">
          <!-- 上传视频部分 -->
          <el-upload class="video-uploader" :action="server" :headers="imgheaders" :show-file-list="false"
            :on-success="handleSuccess" :before-upload="beforeUpload" accept="video/*">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <div style="clear: both"></div>
          <video v-if="videoUrl_add" :src="videoUrl_add" controls class="video-preview"></video>
          <!-- <video v-else class="video-preview-border" style="border: 1px dashed var(--el-border-color-darker);border-radius:6px;overflow:hidden"></video> -->
          <!-- 上传视频部分 -->
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ButtonMoreItem } from '@/components/core/forms/ArtButtonMore.vue'
import { ElMessage, ElMessageBox, UploadProps } from 'element-plus'
import type { FormInstance } from 'element-plus'
import {
  getupdateList,
  addupdateList,
  getcarmodellist,
  getdsquestiongroup,
  getquestioncategory,
  delquestionlist,
  putquestioncategory
} from '@/api/questionbank'
const pagetotal = ref()
const pageNum = ref(1)
const pageSize = ref(50)
// 使用类型化的ref
const tableData = ref([])
const cardlist = ref([{ value: '', label: '', tag: '' }])
const cardvaluelist = ref() //车型value值

const dialogVisible = ref(false)
const permissionDialog = ref(false)
const tableLayout = ref('0')
const questionoption = ref()
const columns = reactive([
  { name: '用户信息', show: true },
  { name: '手机号', show: true },
  { name: '性别', show: true },
  { name: '来源', show: true },
  { name: '状态', show: true },
  { name: '创建日期', show: true }
])

const formRef = ref<FormInstance>()

const form = reactive({
  id: '',
  cont_type: '',
  questionName: '',
  des: '',
  sort: '',
  questionA: '',
  questionB: '',
  questionC: '',
  questionD: '',
  answer: '',
  questionAnalysis: '',
  fastStudy: ''
})

const dialogType = ref('add')

const showDialog = (type: string, row?: any) => {
  dialogVisible.value = true
  dialogType.value = type

  if (type === 'edit' && row) {
    // if(row.groupIds){
    //   const groupIdsarray = row.groupIds.split(',')
    //   const newgroupids = []
    //   for (const i in groupIdsarray) {
    //     newgroupids.push(groupIdsarray[i].split('-'))
    //   }
    //   cascadervalue.value = newgroupids
    // }else{
    //   cascadervalue.value = ''
    // }
    const newlistarrayone: string[] = []
    const newlistarraythree: string[] = []
    for (const i in row.questionGroupList) {
      for (const j in row.questionGroupList[i].children) {
        newlistarrayone.push(row.questionGroupList[i].children[j].id)
        newlistarraythree.push(row.questionGroupList[i].id)
        // newgroupids_two.push(newquestionGroupList[j].push(row.questionGroupList[i].children[j].id))
      }
    }
    const newgroupids_two = newlistarraythree.map((item, index) => [item, newlistarrayone[index]])
    console.log(newgroupids_two, '++??cy')

    cascadervalue.value = newgroupids_two
    form.id = row.id
    form.questionName = row.questionName
    cardvaluelist.value = row.carIds.split(',')
    questionoption.value = row.categoryId.split(',')
    form.des = row.des
    form.sort = row.sort
    form.questionA = row.questionA
    form.questionB = row.questionB
    form.questionC = row.questionC
    form.questionD = row.questionD
    form.answer = row.answer
    form.questionAnalysis = row.questionAnalysis
    form.fastStudy = row.fastStudy
    storeLogo.value = row.questionImg
    radio.value = row.questionType.toString()
    videoUrl_add.value = row.videoUrl
  } else {
    form.id = ''
    form.questionName = ''
    form.cont_type = ''
    form.des = ''
    form.sort = ''
    form.questionA = ''
    form.questionB = ''
    form.questionC = ''
    form.questionD = ''
    form.answer = ''
    form.questionAnalysis = ''
    form.fastStudy = ''
    videoUrl_add.value = ''
    cardvaluelist.value = []
    questionoption.value = []
    radio.value = '1'
    storeLogo.value = ''
    cascadervalue.value = ''
  }
}

const buttonMoreClick = (item: ButtonMoreItem, row: any) => {
  if (item.key === 'permission') {
    showPermissionDialog()
  } else if (item.key === 'edit') {
    showDialog('edit', row)
  } else if (item.key === 'delete') {
    deleteRole(row.id)
  }
}

const showPermissionDialog = () => {
  permissionDialog.value = true
}

const searchFormRef = ref<FormInstance>()

const changeColumn = (list: any) => {
  columns.values = list
}

const searchForm = reactive({
  questionName: '',
  carIds: '',
  cont_type: '',
  createTime: [],
  startCreatTime: []
})

const deleteRole = async (id: string) => {
  ElMessageBox.confirm('确定删除该题库吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    //执行删除接口
    delquestioninfo(id)
  })
}
const delquestioninfo = async (id: string) => {
  const res = await delquestionlist.delquestionlistId(id)
  console.log(res)
  if (res.code == '0') {
    //更细完成后执行
    ElMessage.success('删除成功')
    getquestionbankllist(tableLayout.value)
  }
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogVisible.value = false
  if (dialogType.value === 'add') {
    //执行新增题库接口
    addupdateinfo()
  } else {
    //执行修改接口
    putupdateinfo(form.id)
  }
}
//新增题库接口
const addupdateinfo = async () => {
  //新增用户接口
  let obj = {
    questionName: form.questionName,
    carIds: cardvalueliststring.value,
    sort: form.sort,
    questionImg: storeLogo.value,
    questionType: radio.value,
    questionA: form.questionA,
    questionB: form.questionB,
    questionC: form.questionC,
    questionD: form.questionD,
    answer: form.answer,
    questionAnalysis: form.questionAnalysis,
    fastStudy: form.fastStudy,
    videoUrl: videoUrl_add.value,
    categoryId: questionoptionstring.value,
    groupIds: cascaderstring.value
  }
  if (radio.value == '2') {
    obj.questionC = ''
    obj.questionD = ''
  }
  const res = await addupdateList.addupdateId(obj)
  console.log(res)
  if (res.code == '0') {
    //更细完成后执行
    ElMessage.success('新增成功')
    getquestionbankllist(tableLayout.value)
  }
}
//修改题库接口
const putupdateinfo = async (id: string) => {
  let obj = {
    questionName: form.questionName,
    carIds: cardvalueliststring.value,
    sort: form.sort,
    questionImg: storeLogo.value,
    questionType: radio.value,
    questionA: form.questionA,
    questionB: form.questionB,
    questionC: form.questionC,
    questionD: form.questionD,
    answer: form.answer,
    questionAnalysis: form.questionAnalysis,
    fastStudy: form.fastStudy,
    videoUrl: videoUrl_add.value,
    categoryId: questionoptionstring.value,
    groupIds: cascaderstring.value
  }
  if (radio.value == '2') {
    obj.questionC = ''
    obj.questionD = ''
  }
  const res = await putquestioncategory.putquestioncategoryId(id, obj)
  console.log(res)
  if (res.code == '0') {
    //更细完成后执行
    ElMessage.success('更新成功')
    getquestionbankllist(tableLayout.value)
  }
}

const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}

const handleImportSuccess = (data: any[]) => {
  // 将导入的数据转换为正确的格式
  const formattedData = data.map((item) => ({
    id: item['id'],
    bankcont_title: item['题目标题'],
    date: item['答案'],
    bankcont_analysis: item['题目类型'],
    bankcont_type: item['车型'], //题目类型
    bankcont_type_two: item['题库分类'], //题库分类
    bankcont_type_label: item['是否VIP'],
    card_type: item['']
  }))
  // tableData.value = formattedData
  //  tableData.value = data
}

const handleImportError = (error: Error) => {
  // 处理导入错误
  console.error('导入失败:', error)
}

// 自定义表头映射
const headers = {
  id: 'ID', //id
  bankcont_title: '题目标题', //题目分类
  date: '题目时间', //题目时间
  bankcont_answer: '答案', //是否精选
  bankcont_analysis: '答案解析', //题目标签
  bankcont_type: '题目类型', //题目类型
  bankcont_type_two: '题库分类' //题目类型
}

const handleExportSuccess = () => {
  ElMessage.success('导出成功')
}

const handleExportError = (error: Error) => {
  ElMessage.error(`导出失败: ${error.message}`)
}

const handleClear = () => {
  tableData.value = []
}

//搜索刷新等
const search = async () => {
  console.log(searchForm)
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    questionName: searchForm.questionName,
    carId: searchForm.carIds,
    questionType: searchForm.cont_type,
    startCreateTime: searchForm.startCreatTime[0],
    endCreateTime: searchForm.startCreatTime[1],
    categoryId: tableLayout.value
  }
  if (tableLayout.value == '0') {
    obj.categoryId = ''
  }
  const res = await getupdateList.getupdateId(obj)
  if (res.code == '0') {
    tableData.value = res.data.list
    pagetotal.value = res.data.total
  }
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
    //清空搜索框内容
    ; (searchForm.questionName = ''),
      (searchForm.carIds = ''),
      (searchForm.cont_type = ''),
      (searchForm.startCreatTime = [])
}
//弹出层所需的参数和事件
const radio = ref('1')
const types_one = ref([])

//展示不同的题目类型
const typeOptions = [
  {
    value: '0',
    label: '多选题'
  },
  {
    value: '1',
    label: '单选题'
  },
  {
    value: '2',
    label: '判断题'
  }
]

onMounted(() => {
  getquestionbankllist('0') //请求驾校列表接口
  getcarmodellistinfo() //请求车型下拉接口
  getgroupllistinfo() //请求分组接口
  getquestioncategoryinfo() //请求下拉科目接口
})
const getquestionbankllist = async (categoryId: string) => {
  let categoryIdnums
  if (categoryId != '0') {
    categoryIdnums = categoryId
  } else {
    categoryIdnums = ''
  }
  const obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryIdnums
    // type:1
  }
  const res = await getupdateList.getupdateId(obj)
  if (res.code == '0') {
    tableData.value = res.data.list
    pagetotal.value = res.data.total
  }
}
//车型下拉接口
const getcarmodellistinfo = async () => {
  let obj = {}
  const res = await getcarmodellist.getcarmodelId(obj)
  if (res.code == '0') {
    cardlist.value = res.data
  }
}
//请求下拉科目接口
const questionlist = ref()
const getquestioncategoryinfo = async () => {
  let obj = {}
  const res = await getquestioncategory.getquestioncategoryId(obj)
  if (res.code == '0') {
    questionlist.value = res.data
  }
}
//分页数据处理
const currentchange = (val: number) => {
  pageNum.value = val
  getquestionbankllist(tableLayout.value) //请求用户列表接口
}
const sizechange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getquestionbankllist(tableLayout.value) //请求用户列表接口
}
//获得选中的车型label
const cardvalueliststring = ref()
const handleCheckedCitiesChange = (val: any) => {
  console.log(val) //请求用户列表接口
  cardvalueliststring.value = val.toString()
}
//所选科目复选框
const questionoptionstring = ref()
const handlequestionoption = (val: any) => {
  console.log(val) //请求用户列表接口
  questionoptionstring.value = val.toString()
}
//获取分组树形结构
const getgroupllistinfo = async () => {
  let obj = {}
  const res = await getdsquestiongroup.getdsquestiongroupId(obj)
  if (res.code == '0') {
    console.log(res)
    types_one.value = res.data
  }
}
//获取树形结构的选中值
const cascaderstring = ref()
const cascadervalue = ref()
const cascaderclick = (val: any) => {
  console.log(val)
  let newarray: any[] = []
  for (const i in val) {
    newarray.push(val[i].join('-'))
  }
  cascaderstring.value = newarray.join(',')
  console.log(cascaderstring.value)
}
//上传图片接口请求
import { useUserStore } from '@/store/modules/user'
import { log } from 'console'
const userStore = useUserStore()
let server = `${import.meta.env.VITE_API_URL}files`
let { accessToken } = userStore
const imgheaders = { Authorization: 'Bearer ' + accessToken }
const storeLogo = ref('')
const videoUrl_add = ref('')

const handleAvatarSuccess = (file: any) => {
  console.log(file)
  storeLogo.value = file.data.url
}
//上传限制大小格式等
const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 10240 / 10240 < 2
  if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/gif') {
    ElMessage.error('图片类型仅支持JPG/PNG/GIF格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 20MB!!')
    return false
  }
}
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isVideo = file.type.includes('video/')
  const isLt500M = file.size / 1024 / 1024 < 500

  if (!isVideo) {
    ElMessage.error('只能上传视频文件!')
    return false
  }
  if (!isLt500M) {
    ElMessage.error('视频大小不能超过500MB!')
    return false
  }
  return true
}

const handleSuccess: UploadProps['onSuccess'] = (response) => {
  console.log(response)
  videoUrl_add.value = response.data.url
  ElMessage.success('视频上传成功!')
}

//切换tab清空页数等
const getquestionbankllist_tab = (nums: string) => {
  pageNum.value = 1
  getquestionbankllist(nums)
}
const handleError = (file: any) => {
  console.log(file)
}
</script>

<style lang="scss" scoped>
.page-content {
  .svg-icon {
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    vertical-align: -8px;
    fill: currentcolor;
  }
}

.tag-item+.tag-item {
  margin-left: 5px;
}

.label {
  float: left;
  margin: 0.5rem 0 0.5rem 1.5rem;
  display: inline;
}

.labellist .label:nth-child(1) {
  margin-left: 0;
}

.bankcont_title {
  display: flex;
  // align-items: center;
}

.bankcont_title_text {
  float: left;
  margin-right: 1rem;
  font-weight: bold;
}

.label_sonli {
  color: #5d87ff;
}

.cell {
  width: 500px;
}

.tag-item {
  margin-left: 5px;
}

.tagcontsize {
  color: #999;
}

.tagcontbigsize {
  margin-top: 0.5rem;
}

.tableimg {
  width: 100%;
  height: 100%;
}

.title_box_left {
  float: left;
  width: 8rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-right: 1rem;
}

.title_box_right {
  float: right;
  float: left;
}

.columnvideo {
  border-radius: 0.5rem;
}

.tableimg {
  width: 120px;
  height: 120px;
  border-radius: 6px;
}

::v-deep img {
  max-width: 178px;
  display: inline;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  max-width: 178px;
}

.video-uploader {
  border-radius: 6px;
  color: #fff;
  display: block;
}

.uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.video-preview {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}

.video-preview-border {
  margin-top: 10px;
  width: 600px;
  height: 300px;
}

.button_bigbox {
  display: flex;
}

.cartcont {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.cartcont_btn {
  float: left;
  margin-top: 10px;
}

.cartcont_bigbtn {
  margin-right: 12px;
}
</style>
